<template>
    <div class="ad-container">
        <div v-if="data.singleImg.using && !data.singleImg.src">
            <dont-choose-media/>
        </div>
        <div v-else-if="data.singleImg.using" class="single-img">
            <div class="ad-wraper">
                <div class="ad-user-name">{{data.userInfo.name}}</div>
                <div v-show="data.adText != ''" class="ad-text">{{data.adText}}</div>
                <div class="ad-body">
                    <img :src="data.singleImg.src" alt="img" >
                    <div class="singleImg-info">
                        <div class="singleImg-title">{{data.singleImg.title}}</div>
                        <div class="singleImg-link">{{singleImgLink}}</div>
                    </div>
                    <div v-show="data.singleImg.actionCall != '无按钮' && data.singleImg.actionCall != ''" class="singleImg-detail">{{data.singleImg.actionCall}}</div>
                </div>
                <div class="ad-footer">
                    <div class="ad-privace">公开</div>
                    <div class="ad-oprate">
                        <span>赞</span> · <span>留下心情</span> · <span>评论</span> · <span>分享</span> · <span>完整动态</span> · 赞助内容
                    </div>
                </div>
            </div>
        </div>
        <div v-else>
            <dont-support-message :type="type"/>
        </div>
    </div>

</template>

<script>
    import Vue from 'vue'
    import DontSupportMessage from '~components/ad-preview/dont-support-message.vue'
    import DontChooseMedia from '~components/ad-preview/dont-choose-media.vue'

    export default {
        components: {
            DontSupportMessage,
            DontChooseMedia
        },
        props: {
            'data': {
                default: {}
            }
        },
        data (){
            return {
                type:'非智能手机',
            }
        },
        computed: {
            singleImgLink: function () {
                if(this.data.showLink) {
                    return this.data.showLink
                }else if(this.data.singleImg.link) {
                    return this.data.singleImg.link
                }else{
                    return 'displayurl.com'
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .ad-container{
        /*width: 308px;*/
        margin: 0 auto;
        background: #fff;
    }
    .ad-wraper{
        width: 308px;
        margin: 6px auto;
        padding: 6px;
        background: #fff;
        border-color: #ccced3 #c4c6ca #b4b6ba;
        border-style: solid;
        border-width: 1px;
    }
    .ad-user-name{
        font-weight: bold;
        color: #3b5998;
        font-size: 13px;
        line-height: 22px;
    }
    .ad-text{
        margin: 5px 0;
    }
    .ad-body{
        overflow: hidden;
        padding: 4px;
        border: 1px solid #ccc;
        margin: 5px 0;
        word-wrap: break-word;
        background: #f6f7f9;
        &>div{
            overflow: hidden;
          }
    }
    .single-img{
        img{
            float: left;
            width: 112px;
            height: 112px;
            border: none;
        }
    }
    .singleImg-info{
        float: left;
        padding-left: 4px;
        width: auto;
    }
    .singleImg-title{
        font-size: small;
        font-weight: bold;
        line-height: 20px;
    }
    .singleImg-link{
        font-size: 12px;
        line-height: 16px;
    }
    .singleImg-detail{
        float: left;
        width: 100%;
        color: #3b5998;
        font-size: 14px;
        line-height: 20px;
    }
    .ad-footer{
        margin-top: 5px;
        font-size: small;
        color: gray;
    }
    .ad-privace{
        line-height: 16px;
    }
    .ad-oprate {
        line-height: 18px;
        span{
            color: #3b5998;
        }
    }
    .ad-unsupport{
        margin-top: 10px;
        background-color: rgb(255, 255, 255);
        border-radius: 3px;
        display: flex;
        position: relative;
        color: #191919;
        font-family: Helvetica, Arial, Lucida Grande, sans-serif;
        font-size: 13px;
        line-height: 1.358;
        .icon{
            background-color: rgb(64, 128, 255);
            border-radius: 3px 0 0 3px;
            align-items: center;
            display: flex;
            flex-shrink: 0;
            font-size: 29px;
            justify-content: center;
            line-height: 40px;
            width: 40px;
            color: #191919;
            font-family: Helvetica, Arial, Lucida Grande, sans-serif;
            i{
                display: inline-block;
                height: 16px;
                width: 16px;
                border-radius: 50%;
                color: rgb(64, 128, 255);
                background-color: white;
                font-size: 12px;
                line-height: 16px;
                text-align: center;
                font-weight: 700;
            }
        }
        .tips{
            background-color: rgb(255, 255, 255);
            color: rgb(0, 0, 0);
            font-family: Helvetica, Arial, sans-serif;
            font-size: 12px;
            -webkit-font-smoothing: antialiased;
            line-height: 17px;
            align-items: center;
            border: 1px solid;
            border-width: 1px 1px 1px 0;
            border-color: rgb(206, 208, 212);
            border-radius: 0 3px 3px 0;
            box-sizing: border-box;
            display: flex;
            flex-grow: 1;
            min-height: 40px;
            padding: 10px 10px 8px 16px;
        }
    }
</style>